<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <!-- 主体区 -->
      <el-form label-width="100px" :model="edit_form" :rules="edit_rules"  ref="edit_ref">
        <el-form-item label="站点名称" prop="name">
          <el-input placeholder="请输入站点名称" maxlength="20" clearable show-word-limit v-model="edit_form.name"></el-input>
        </el-form-item>
        <el-form-item label="logo图片" prop="image_id">
          <s-file-image :url="edit_form.image_url" @confirm_imsge="confirm_imsge"></s-file-image>
        </el-form-item>
        <el-form-item label="公众号logo" prop="gzh_id">
          <s-file-image :url="edit_form.gzh_url" @confirm_imsge="gzh_imsge"></s-file-image>
        </el-form-item>
        <el-form-item label="小程序logo" prop="gzh_id">
          <s-file-image :url="edit_form.xcx_url" @confirm_imsge="xcx_imsge"></s-file-image>
        </el-form-item>
        <el-form-item label="图片储存" prop="image_status">
          <el-radio-group v-model="edit_form.image_status" size="medium">
            <el-radio border :label="1">本地</el-radio>
            <el-radio border :label="2">七牛云</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关于我们" prop="about_us">
          <s-editor :content="edit_form.about_us" @confirm_content="confirm_content"></s-editor>
        </el-form-item>
      </el-form>

      <!-- 按钮区 -->
      <el-button class="send_btn" :disabled="update_btn" type="primary" @click="update()">确 定</el-button>
    </el-card>
  </div>
</template>
<script>
import sFileImage from '../../../../components/s-file-image/s-file-image.vue'
import sEditor from '../../../../components/s-editor/s-editor.vue'
export default {
  components: {
    's-file-image': sFileImage,
    's-editor': sEditor
  },
  data () {
    return {
      update_btn: this.is_string('auth/auth_config/update'),
      edit_form: {
        id: '',
        name: '',
        image_status: 1,
        image_url: '',
        image_id: '',
        gzh_url: '',
        gzh_id: '',
        xcx_url: '',
        xcx_id: '',
        about_us: ''
      },
      edit_rules: {
        name: [
          { required: true, message: '请输入名称！', trigger: 'blur' },
          { min: 2, max: 20, message: '名称长度在2到20个字符', trigger: 'blur' }
        ],
        image_status: [
          { required: true, message: '请选择图片储存方式！', trigger: 'blur' }
        ],
        image_id: [
          { required: true, message: '请选择logo图片！', trigger: 'blur' }
        ],
        gzh_id: [
          { required: true, message: '请选择公众号logo！', trigger: 'blur' }
        ],
        xcx_id: [
          { required: true, message: '请选择小程序logo！', trigger: 'blur' }
        ],
        about_us: [
          { required: true, message: '请输入关于我们！', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.get_info()
  },
  methods: {
    confirm_content (res) {
      this.edit_form.about_us = res
    },
    // 图片上传回调
    confirm_imsge (res) {
      this.edit_form.image_id = res.image_id
    },
    // 图片上传回调
    gzh_imsge (res) {
      this.edit_form.gzh_id = res.image_id
    },
    // 图片上传回调
    xcx_imsge (res) {
      this.edit_form.xcx_id = res.image_id
    },
    // 获取信息
    get_info () {
      this.$base.request({
        that: this,
        url: 'auth/auth_config/index'
      }, (res) => {
        if (res.code === 8888) {
          this.edit_form = res.data
        }
      })
    },
    // 确定
    update () {
      this.$refs.edit_ref.validate(valid => {
        if (valid) {
          this.$base.request({
            that: this,
            method: 'PUT',
            url: 'auth/auth_config/update',
            data: this.edit_form
          }, (res) => {
            if (res.code === 8888) {
              this.$base.message({ that: this, message: res.msg })
            }
          })
        }
      })
    }
  }
}
</script>
